<!--list-->
<template>
  <view class="container">
    <tui-list-view class="tui-list-view" title="示例">
      <view v-for="item in dataList">
        <tui-list-cell :arrow="true" @click="toItem(item)">
          {{item.name}}
        </tui-list-cell>
      </view>
    </tui-list-view>
  </view>
</template>

<script>
  import tuiListView from "@/components/list-view/list-view"
  import tuiListCell from "@/components/list-cell/list-cell"

  export default {
    components: {
      tuiListView,
      tuiListCell
    },
    name: "list",
    data() {
      return {
        dataList: [
          {name: '九宫格', url: '/pages/example/grid/grid'},
          {name: '轮播图', url: '/pages/example/swiper/swiper'},
          {name: '其他', url: '/pages/example/others/others'},
          {name: '二维码', url: '/pages/example/qrcode/qrcode'},
          {name: '抽屉', url: '/pages/example/drawer/drawer'},
          {name: '滑动', url: '/pages/example/swipe-action/swipe-action'},
          {name: '顶部选项卡', url: '/pages/example/navbar-top/navbar-top'},
          {name: '上划下拉', url: '/pages/example/refresh-and-load/refresh-and-load'},
          {name: '表单', url: '/pages/example/formValidation/formValidation'},
        ]
      }
    },
    methods: {
      toItem(item) {
        this.tui.toPage(item.url)
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "list.css";
</style>
